﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bom 物料信息表 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <div style="padding: 16px;">
        <!-- 添加查询条件 -->
        <div style="margin-bottom: 10px;">
            <input type="text" id="bomCode" placeholder="请输入Bom编号" class="layui-input" style="width: 200px; display: inline-block;">
            <input type="text" id="partsName" placeholder="请输入物料名称" class="layui-input" style="width: 200px; display: inline-block;">
            <button class="layui-btn" id="searchBtn">查询</button>
        </div>
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <!-- 新增的最后一列操作按钮模板 -->
    <script type="text/html" id="operateTemplate">
        <a class="layui-btn layui-btn-xs" lay-event="createChild">创建子物料</a>
    </script>
    <!-- 弹框内容模板 -->
    <script type="text/html" id="addMaterialModal">
        <div style="padding: 20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">物料编号</label>
                <div class="layui-input-block">
                    <input type="text" id="newPartsCode" placeholder="请输入物料编号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">物料名称</label>
                <div class="layui-input-block">
                    <input type="text" id="newPartsName" placeholder="请输入物料名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">规格类型</label>
                <div class="layui-input-block">
                    <input type="text" id="newPartsType" placeholder="请输入规格类型" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-block">
                    <select id="newPartsUnit" class="layui-select">
                        <option value="台">台</option>
                        <option value="箱">箱</option>
                        <option value="瓶">瓶</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">品牌</label>
                <div class="layui-input-block">
                    <select id="newPartsBrand" class="layui-select">
                        <option value="1">五毒牌</option>
                        <option value="2">混合牌</option>
                        <option value="3">清新牌</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配件数量</label>
                <div class="layui-input-block">
                    <input type="number" id="newPartsNum" placeholder="请输入配件数量" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">损耗率</label>
                <div class="layui-input-block">
                    <input type="text" id="newPartsLoss" placeholder="请输入损耗率" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">当前库存</label>
                <div class="layui-input-block">
                    <input type="number" id="newinventory" placeholder="请输入当前库存" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">可供生产</label>
                <div class="layui-input-block">
                    <input type="number" id="newavailableProduce" placeholder="请输入可供生产" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="saveNewMaterial">保存</button>
                </div>
            </div>
        </div>
    </script>
    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'dropdown', 'layer', 'form', 'jquery'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;

            // 表格渲染配置
            table.render({
                elem: '#test',
                url: 'http://localhost:5234/api/WorkOrder/GetBomPart',
                //url: "@ViewBag.BaseUrl/T7/WorkOrder/GetBomPart",
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips',
                    onClick: function () {
                        layer.alert('自定义工具栏图标按钮');
                    }
                }],
                height: 'full-35',
                css: ['.layui-table-tool-temp{padding-right: 145px;}'].join(''),
                cellMinWidth: 80,
                totalRow: true,
                page: true,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'partsId', title: '主键' },
                    { field: 'bomCode', title: 'BOM编号' },
                    { field: 'partsCode', title: '物料编号' },
                    { field: 'partsName', title: '物料名称' },
                    { field: 'partsType', title: '规格类型' },
                    { field: 'partsUnit', title: '单位' },
                    {
                        field: 'partsBrand', title: '品牌', templet: function (d) {
                            switch (d.partsBrand) {
                                case 1: return "五毒牌";
                                case 2: return "混合牌";
                                case 3: return "清新牌";
                                default: return "";
                            }
                        }
                    },
                    { field: 'partsNum', title: '配件数量' },
                    { field: 'partsLoss', title: '损耗率' },
                    { field: 'inventory', title: '当前库存' },
                    { field: 'availableProduce', title: '可供生产' },
                    { title: '操作', toolbar: '#operateTemplate', width: 150 }
                ]],
                error: function (res, msg) {
                    console.error('表格加载失败:', res, msg);
                }
            });

            // 监听工具条事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'createChild') {
                    // 弹出弹框
                    layer.open({
                        type: 1,
                        title: '添加子物料',
                        area: ['400px', 'auto'],
                        content: $('#addMaterialModal').html(),
                        success: function (layero, index) {
                            // 将当前行的partsId存储在弹框的隐藏域中（这里可以根据实际情况选择存储方式）
                            $(layero).find('#parentPartsId').val(data.partsId);
                        },
                        btn: ['保存', '取消'],
                        yes: function (index, layero) {
                            // 获取弹框中的输入值
                            var newPartsCode = $(layero).find('#newPartsCode').val();
                            var newPartsName = $(layero).find('#newPartsName').val();
                            var newPartsType = $(layero).find('#newPartsType').val();
                            var newPartsUnit = $(layero).find('#newPartsUnit').val();
                            var newPartsBrand = $(layero).find('#newPartsBrand').val();
                            var newPartsNum = $(layero).find('#newPartsNum').val();
                            var newPartsLoss = $(layero).find('#newPartsLoss').val();
                            var parentPartsId = $(layero).find('#parentPartsId').val();
                            var newinventory = $(layero).find('#newinventory').val();
                            var newavailableProduce = $(layero).find('#newavailableProduce').val();

                            // 发送请求到后端接口进行添加操作
                            $.ajax({
                                url: 'http://localhost:5090/api/WrokOrder/AddParts',
                                //url: "@ViewBag.BaseUrl/T7/WrokOrder/AddParts",
                                type: 'POST',
                                data: {
                                    partsCode: newPartsCode,
                                    partsName: newPartsName,
                                    partsType: newPartsType,
                                    partsUnit: newPartsUnit,
                                    partsBrand: newPartsBrand,
                                    partsNum: newPartsNum,
                                    partsLoss: newPartsLoss,
                                    pId: parentPartsId,

                                },
                                success: function (res) {
                                    layer.msg('添加成功', { icon: 1 });
                                    // 刷新表格
                                    table.reload('test');
                                    layer.close(index);
                                },
                                error: function (res, msg) {
                                    layer.msg('添加失败', { icon: 2 });
                                }
                            });
                        }
                    });
                }
            });

            $('#searchBtn').on('click', function () {
                var bomCode = $('#bomCode').val();
                var partsName = $('#partsName').val();
                // 重载表格数据，传递查询参数
                table.reload('test', {
                    url: 'http://localhost:5234/api/WorkOrder/GetBomPart',
                    //url: "@ViewBag.BaseUrl/T7/WorkOrder/GetBomPart",

                    where: {
                        bomCode: bomCode,
                        partsName: partsName
                    },
                    page: {
                        curr: 1 // 重新从第一页开始
                    }
                });
            });
        });
    </script>
</body>

</html>